<template>
	<view class="container">
		<tui-table :borderTop="false">
			<tui-tr fixed border-left border-top>
				<tui-td height="30px" bold v-for="(item,index) in header" :key="index" :span="8">{{item.title}}</tui-td>
			</tui-tr>
			<tui-tr :margin-top="index==0?'30px':'0'" v-for="(item, index) in listData" :key="index">
				<tui-td :span="8" v-for="(obj, idx) in header" :key="idx">{{item[obj.key]}}</tui-td>
			</tui-tr>
		</tui-table>
		<view class="tui-section__title">结合scroll-view</view>

		  <tui-table>
			<tui-tr>
				<tui-td height="30px" bold v-for="(item,index) in header" :key="index" :span="8">{{item.title}}</tui-td>
			</tui-tr>
			<scroll-view style="height: 400rpx;" scroll-y>
				<tui-tr v-for="(item, index) in listData" :key="index">
					<tui-td :span="8" v-for="(obj, idx) in header" :key="idx">{{item[obj.key]}}</tui-td>
				</tui-tr>
			</scroll-view>
		</tui-table>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				header: [{
						title: '姓名',
						key: 'name'
					},
					{
						title: '年龄',
						key: 'age'
					},
					{
						title: '地址',
						key: 'address'
					}
				],
				listData: [{
						id: 1,
						name: '张三',
						age: '18',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 2,
						name: '李四',
						age: '16',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 3,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 4,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 5,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 6,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 7,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 8,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 9,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 10,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 11,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 12,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 13,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 14,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 15,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		padding-bottom: 120rpx;
	}
</style>
